<template>
  <div class="baseInfoDialog">
    <el-form :model="ruleForm" :inline="true" ref="formRef" label-width="120px">
      <el-form-item
        label="试验样本名称"
        prop="sampleName"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <div class="blurred-search">
          <el-select
            v-model="ruleForm.sampleName"
            :disabled="props.editDialogVisible"
            clearable
            placeholder="请模糊搜索"
            filterable
            v-if="!switchStatus"
            @change="onChangeSelect"
          >
            <el-option
              v-for="(item, index) in testSampleList"
              :key="index"
              :label="item.sampleName"
              :value="item"
            />
          </el-select>
          <el-input
            v-model="ruleForm.sampleName"
            :disabled="props.editDialogVisible"
            placeholder="请手动输入"
            style="width: 210px"
            v-if="switchStatus"
          />
          <div v-if="!editDialogVisible" class="common-buttons">
            <el-button
              type="info"
              style="margin-left: 10px"
              @click="onSwitch"
              v-if="switchStatus"
              >模糊搜索</el-button
            >
            <el-button
              type="info"
              style="margin-left: 10px"
              @click="onSwitch"
              v-if="!switchStatus"
              >手动输入</el-button
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item
        label="作战场景"
        prop="operatingScen"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select
          v-model="ruleForm.operatingScen"
          clearable
          placeholder="请选择"
        >
          <el-option label="对地" value="对地" />
          <el-option label="对海" value="对海" />
          <el-option label="对空" value="对空" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="导引头体制"
        prop="dytStyle"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select v-model="ruleForm.dytStyle" clearable placeholder="请选择">
          <el-option label="雷达(主动)" value="雷达(主动)" />
          <el-option label="雷达(被动)" value="雷达(被动)" />
          <el-option label="红外" value="红外" />
          <el-option label="雷达-红外符合制导" value="雷达-红外符合制导" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="干扰场景类型"
        prop="interScenType"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select
          v-model="ruleForm.interScenType"
          clearable
          placeholder="请选择"
        >
          <el-option label="单一干扰" value="单一干扰" />
          <el-option label="组合干扰" value="组合干扰" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="干扰类型"
        prop="interType"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select v-model="ruleForm.interType" clearable placeholder="请选择">
          <el-option label="舰载有源干扰-雷达" value="舰载有源干扰-雷达" />
          <el-option label="舷外有源干扰-雷达" value="舷外有源干扰-雷达" />
          <el-option label="箔条干扰-雷达" value="箔条干扰-雷达" />
          <el-option label="角反干扰-雷达" value="角反干扰-雷达" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="外军电子战备类型"
        prop="foreignElectEquip"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'change',
        }"
      >
        <el-select
          v-model="ruleForm.foreignElectEquip"
          clearable
          placeholder="请选择"
        >
          <el-option label="舰载有源干扰" value="舰载有源干扰" />
          <el-option label="舷外有源干扰" value="舷外有源干扰" />
          <el-option label="角反干扰" value="角反干扰" />
        </el-select>
      </el-form-item>
      <div class="dialog-footer common-buttons">
        <el-button type="info" @click="props.handleClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit(formRef)"> 确 认 </el-button>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {
  saveSampleBaseInfo,
  updateSampleBaseInfo,
  httpSampleData,
} from "@/api/testSampleData";
let $router = useRouter();
const route = useRoute();
const props = defineProps({
  handleClose: {
    type: Function,
    default: () => {},
  },
  record: {
    type: Object,
    default: () => {
      return {};
    },
  },
  addDialogVisible: {
    type: Boolean,
    default: false,
  },
  editDialogVisible: {
    type: Boolean,
    default: false,
  },
  onQuery: {
    type: Function,
    default: () => {},
  },
});
const ruleForm = ref({
  operatingScen: "",
  dytStyle: "",
  interScenType: "",
  interType: "",
  foreignElectEquip: "",
  sampleName: "", // 模糊搜索用的字段
});
// 表单实例对象
const formRef = ref<FormInstance>();

const testSampleList = ref([]);
// 默认展示模糊搜索，true展示手动输入
const switchStatus = ref<boolean>(false);
const sampleId = ref<string>("");

onMounted(() => {
  getScampleData();
  renderBaseInfo();
});

// 基本信息编辑-回显数据
const renderBaseInfo = () => {
  if (props.editDialogVisible) {
    ruleForm.value = {
      operatingScen: props.record?.operatingScen,
      dytStyle: props.record?.dytStyle,
      interScenType: props.record?.interScenType,
      interType: props.record?.interType,
      foreignElectEquip: props.record?.foreignElectEquip,
      sampleName: props.record?.sampleName, // 模糊搜索用的字段
    };
  }
};

// 试验样本名称数据
const getScampleData = () => {
  httpSampleData({ pageNo: 1, pageSize: 10000 }).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      testSampleList.value = data.rows;
    }
  });
};

const onSwitch = () => {
  switchStatus.value = !switchStatus.value;
};

// 试验样本名称模糊搜索
const onChangeSelect = (row: any) => {
  sampleId.value = row?.id;
  ruleForm.value = {
    operatingScen: row?.operatingScen,
    dytStyle: row?.dytStyle,
    interScenType: row?.interScenType,
    interType: row?.interType,
    foreignElectEquip: row?.foreignElectEquip,
    sampleName: row?.sampleName, // 模糊搜索用的字段
  };
};

// 保存updateSampleBaseInfo
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let params = { ...ruleForm.value };
      if (props.editDialogVisible) {
        params = { ...ruleForm.value, id: props.record.id };
      }
      const httpBaseInfo = props.editDialogVisible
        ? updateSampleBaseInfo
        : saveSampleBaseInfo;
      httpBaseInfo(params).then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          props.handleClose();
          if (props.addDialogVisible) {
            $router.push({
              path: "testSampleData/layer",
              query: {
                layerType: "add",
                sampleId: data.data,
                oldSampleId: sampleId.value,
                interType: ruleForm.value.interType,
              },
            });
          } else {
            props.onQuery({ pageNo: 1 });
          }
          sessionStorage.setItem("baseInfoVO", JSON.stringify(ruleForm.value));
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/buttons";
.baseInfoDialog {
  .blurred-search {
    display: flex;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  :deep() {
    .el-input--small .el-input__wrapper {
      width: 200px;
    }
  }
}
</style>
